<template>
  <div class="back">
    <img src="../assets/logo.png" style="margin-top:10%;"><br>
    <div class="back2"><br><br><br><br>
      <div v-show="loginShow" style="width:300px;margin:auto;">
        <el-input v-model="in_userId" class="input3" prefix prefix-icon="el-icon-bank-card" size="medium"></el-input>
        <br><br>
        <el-input v-model="in_Password" class="input3" placeholder="" prefix-icon="el-icon-lock" show-password
                  size="medium"></el-input>
        <br>
        <br><br>
        <div style="margin:10px;text-align:center">
          <el-button autocomplete="off" class="botton" size="medium" @click="showReg()">注册</el-button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button autocomplete="off" class="botton" size="medium" @click="logincheck()">登录</el-button>
        </div>
      </div>
      <div v-show="registerShow" style="width:300px;margin: -26px auto auto;">
        <el-input v-model="re_userId" class="input3" placeholder="账号" prefix prefix-icon="el-icon-bank-card"
                  size="medium"></el-input>
        <br><br>
        <el-input v-model="re_name" class="input3" placeholder="用户名" prefix-icon="el-icon-user"
                  size="medium"></el-input>
        <br><br>
        <el-input v-model="re_Password" class="input3" placeholder="密码" prefix-icon="el-icon-lock" show-password
                  size="medium"></el-input>
        <br><br>
        <div style="text-align:center;">
          <el-button autocomplete="off" class="botton" size="medium" @click="register()">确定</el-button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button autocomplete="off" class="botton" size="medium" @click="logShow()">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      user: [],
      in_userId: '',
      in_Password: '',
      re_userId: '',
      re_Password: '',
      re_name: '',
      loginShow: true,
      registerShow: false,
      check: 1
    }
  },
  methods: {
    logShow() {
      this.loginShow = true
      this.registerShow = false
    },
    showReg() {
      this.registerShow = true
      this.loginShow = false
    },
    register() {
      if (this.re_userId == null || this.re_userId === '') {
        this.$message("账号不能为空")
      } else if (this.re_name == null || this.re_name === '') {
        this.$message("用户名不能为空")
      } else if (this.re_Password == null || this.re_Password.length < 6) {
        this.$message("密码过短")
      } else {
        this.$http.post("/checkUser", {
          userName: this.re_name,
          userPassword: this.re_Password,
          userId: this.re_userId
        }).then((res) => {
          this.check = res.data
          if (this.check === 1) {
            this.$message("账号重复！")
          } else {
            this.$http.get("/saveOrUpdateUser", {
              params: {
                userId: this.re_userId,
                userName: this.re_name,
                userPassword: this.re_Password,
              }
            })
            this.registerShow = false
            this.loginShow = true
            this.$message("注册成功！")
          }
        })
      }
    },
    logincheck() {
      this.$http.post("/loginCheck", {
        userId: this.in_userId,
        userPassword: this.in_Password
      }).then((res) => {
        this.user = res.data
        if (Object.keys(this.user).length === 0) {
          this.$message('账号或密码错误');
        } else if (this.user.userId === 1) {
          this.$router.push({
            path: '/manager',
            query: {
              userName: this.user.userName,
              userId: this.in_userId
            }
          })
        } else if (res.data.userId !== 1) {
          this.$router.push({
            path: '/users',
            query: {
              userName: this.user.userName,
              userId: this.user.userId
            }
          })
        }
      })
    },
  }

}
</script>

<style scoped>
.botton {
  border-radius: 10px;
  color: darkorange;
  background-color: #525151;
  border-color: rgb(255, 143, 7);
}

.botton:hover,
.botton:focus {
  border-radius: 10px;
  background: rgb(255, 200, 133);
  border-color: darkorange;
  color: black;
}

.back {
  margin: auto;

  text-align: center;
  height: 100vh;
  background-color: #525151;
  color: darkorange;
}

.back2 {
  border-radius: 30px;
  border: 1px solid darkorange;
  margin: auto;
  text-align: center;
  height: 300px;
  background-color: #525151;
  color: darkorange;
  width: 500px;
  box-shadow: 10px 10px rgba(0, 0, 0, 0.219), 0 0 6px rgba(0, 0, 0, .04);
}

.input3 /deep/ .el-input__inner {
  border-radius: 10px;
  color: darkorange;
  border: 2px solid darkorange;
  background-color: transparent !important;
}
</style>
